<!-- 活动台账-新增 -->
<template>
	<view class="add-box">
		<view class="info shadow radius">
			<view class="info-label">
				<text>运输信息</text>
			</view>
			<view class="info-item">
				<text class="text jsy-text" @click="jsy()">驾驶员</text>
				<text class="jsy-value">{{info.driverName==""?"无":info.driverName}}</text>
				<!-- <input class="input" type="text" v-model="info.driverName" placeholder="请输入驾驶员" /> -->
			</view>
			<view class="info-item">
				<text class="text">车辆号牌</text>
				<select-input class="input" v-model="info.vehCode" type="vehCode" placeholder="请输入车辆号牌">
				</select-input>
			</view>
			<view class="info-item">
				<text class="text">挂车号牌</text>
				<select-input class="input" v-model="info.trailerNo" type="trailerVehCode" placeholder="请输入挂车号牌">
				</select-input>
			</view>
			<view class="info-item">
				<text class="text">活动事由</text>
				<picker mode="selector" :range="select.type" range-key="text" @change="reasonChange">
					<input class="input" type="text" :value="typeText" placeholder="请选择活动事由" disabled />
				</picker>
			</view>
			<view class="info-item">
				<text class="text">开始时间</text>
				<uni-datetime-picker class="date-select" type="date" :end="info.moveEndTime" placeholder="选择开始时间"
					v-model="info.moveStartTime" />
			</view>
			<view class="info-item">
				<text class="text">结束时间</text>
				<uni-datetime-picker class="date-select" type="date" :start="info.moveStartTime" placeholder="选择结束时间"
					v-model="info.moveEndTime" />
			</view>
			<view class="info-item">
				<text class="text">起点所在地区</text>
				<select-region class="input" v-model="info.startPosZipCode" placeholder="请选择起点所在地区">
				</select-region>
			</view>
			<view class="info-item">
				<text class="text">起点详细地址</text>
				<textarea class="input" v-model="info.startPosAddr" placeholder="请输入起点详细地址"
					:auto-height='true'></textarea>
			</view>
			<view class="info-item">
				<text class="text">终点所在地区</text>
				<select-region class="input" v-model="info.endPosZipCode" placeholder="请选择终点所在地区">
				</select-region>
			</view>
			<view class="info-item">
				<text class="text">终点详细地址</text>
				<textarea class="input" v-model="info.endPosAddr" placeholder="请输入终点详细地址"
					:auto-height='true'></textarea>
			</view>
			<view class="info-item">
				<text class="text text2">具体事宜</text>
				<textarea class="input" v-model="info.note" placeholder="请输入具体事宜"
					:auto-height='true'></textarea>
			</view>
		</view>
		<view class="add-btns">
			<view class="btn-cancel" @click="$goBack(1,1)">
				<text>取 消</text>
			</view>
			<view class="btn-submit" @click="submit">
				<text>确 认</text>
			</view>
		</view>
		<select-task ref="child3" @change="jsyPersonChange"></select-task>
	</view>
</template>

<script>
	import selectRegion from '@/components/tool-select/select-region';
	import selectInput from '@/components/tool-select/select-veh';
	import store from "@/store/index";
	import selectTask from '@/components/tool-select/select-task.vue';

	export default {
		components: {
			selectRegion,
			selectInput,
			selectTask
		},
		data() {
			return {
				select: {
					type: [{
						"value": "1",
						"text": "车辆维修"
					}, {
						"value": "2",
						"text": "普通运输"
					}, {
						"value": "3",
						"text": "车辆年检"
					}, {
						"value": "4",
						"text": "罐体检验"
					}, {
						"value": "5",
						"text": "车辆保养"
					}, {
						"value": "6",
						"text": "非民用运输"
					},{
						"value": "7",
						"text": "空车运行"
					},{
						"value": "8",
						"text": "其他"
					}],
				},
				info: {
					driverName: "", // 驾驶员
					vehCode: "", // 车牌号
					trailerNo: "", // 挂车牌号
					type: "", // 活动事由
					moveStartTime: "", // 开始时间
					moveEndTime: "", // 结束时间
					startPosZipCode: "", // 起点所在地区
					startPosAddr: "", // 起点详细地址
					endPosZipCode: "", // 终点所在地区
					endPosAddr: "", // 终点详细地址
					note:"",
					ownerId: this.$store.state.userInfo.ownerId,
				},
				//驾押运输信息map
				ysMsgMap: {
					vehId: "",
				},
			};
		},
		computed: {
			typeText() {
				var res = this.select.type.find((item) => item.value == this.info.type);
				if (res && res.text) {
					return res.text;
				} else {
					return ''
				}
			}
		},
		watch: {
			"info.moveStartTime"(newVal) {
				if (this.info.moveEndTime && new Date(this.info.moveEndTime) < new Date(newVal)) {
					this.info.moveEndTime = ""
				}
			},
			"info.moveEndTime"(newVal) {
				if (this.info.moveStartTime && new Date(this.info.moveStartTime) > new Date(newVal)) {
					this.info.moveStartTime = ""
				}
			},
		},
		methods: {
			reasonChange(e) {
				const index = e.detail.value;
				this.info.type = this.select.type[index].value;
			},
			//获取驾押人员运输信息
			getYsMessage() {
				this.$api.createTaskgetYs({
					'idNumber': store.getters.getEmpIdCard,
				}).then(res => {
					if (res.data.code == 200) {
						const resData = res.data.data || {};
						Object.assign(this.ysMsgMap, resData)
					}
				}).catch(() => {})
			},
			//运输信息 驾驶员
			jsy() {
				this.$api.JYPerson({
					'vehId': this.ysMsgMap.vehId + '123',
					'personnelType': "1"
				}).then(res => {
					if (res.data.data && res.data.data.length) {
						this.$refs.child3.showBox({
							title: "请选择驾驶员",
							getData: res.data.data.map(item => {
								item.$label = item.fullName + (item.idNumber && "(" + item.idNumber
									.slice(-6) + ')')
								return item;
							})
						});
					} else {
						uni.showToast({
							title: '暂无数据',
							icon: 'none'
						})
					}
				}).catch(res => {});
			},

			//运输信息-驾驶人员
			jsyPersonChange(res) {
				const items = res.item;
				this.info.driverName = items.fullName;
				// this.ysMsgMap.driverEmpInfoId = items.empInfoId;
				// this.ysMsgMap.driverIdNumber = items.idNumber;
				// this.ysMsgMap.driverTel = items.mobilePhone;
			},

			submit() {
				const info = this.info;
				var msg = "";
				switch ("") {
					case info.driverName:
						msg = "请输入驾驶员";
						break;
					case info.vehCode:
						msg = "请输入车辆号牌";
						break;
					case info.type:
						msg = "请选择活动事由";
						break;
					case info.moveStartTime:
						msg = "请选择开始时间";
						break;
					case info.moveEndTime:
						msg = "请选择结束时间";
						break;
					case info.startPosZipCode:
						msg = "请选择起点所在地区";
						break;
					case info.startPosAddr:
						msg = "请输入起点详细地址";
						break;
					case info.endPosZipCode:
						msg = "请选择终点所在地区";
						break;
					case info.endPosAddr:
						msg = "请输入终点详细地址";
						break;
						case info.note:
							msg = "请输入具体事宜";
							break;

				}
				if (msg) {
					uni.showToast({
						title: msg,
						icon: "none"
					});
					return false;
				}
				this.$api.mgntvehnotransSubmit(info).then(res => {
					uni.showToast({
						title: '添加成功',
						icon: "none",
						success() {
							setTimeout(() => {
								let pages = getCurrentPages(); // 当前页面        
								let beforePage = pages[pages.length - 2]; // 上上一页 
								uni.navigateBack({
									success: () => {
										beforePage.$vm.getList(true);
									}
								});
							}, 1500); // showToast默认时间
						}
					});
				})
			},
			initSelect() {
				this.$api.getReason().then(res => {
					this.select.type = res
				})
			}
		},
		mounted() {
			this.initSelect();
			this.getYsMessage()
		}
	}
</script>

<style lang="scss" scoped>
	.add-box {
		padding: 20rpx;
	}

	.add-btns {
		text-align: center;
		padding: 40rpx 0;

		.btn-cancel,
		.btn-submit {

			display: inline-block;
			margin: 0 30rpx;
			border-radius: 50rpx;
			padding: 0 80rpx;
			font-size: 32rpx;
		}

		.btn-cancel {
			border: 2rpx solid #CCCCCC;
			line-height: 80rpx;
		}

		.btn-submit {
			line-height: 84rpx;
			background-color: $app-color;
		}
	}

	.info {
		background-color: #fff;

		.info-label {
			position: relative;
			padding: 30rpx 0;
			border-bottom: 2rpx solid #dddddd;

			text {
				font-size: 32rpx;
			}

			&::after {
				content: "";
				position: absolute;
				left: -30rpx;
				top: 50%;
				transform: translateY(-50%);
				width: 6rpx;
				height: 38rpx;
				background-color: $app-color;
			}
		}

		.info-item {
			display: flex;
			padding: 30rpx 0;
			border-bottom: 2rpx solid #dddddd;

			.text {
				font-size: 28rpx;
				line-height: 36rpx;
			}

			.input {
				font-size: 28rpx;
				height: 36rpx;
				line-height: 36rpx;
				flex: 1;
				padding: 0 20rpx;
			}

			.city-select {
				flex: 1;
				padding: 0 20rpx;

				::v-deep .input-value-border {
					border: 0;
					line-height: 36rpx;
					height: 36rpx;
				}
			}

			.date-select {
				flex: 1;

				::v-deep .uni-date-x--border {
					border: 0;

					.uni-date-x {
						padding: 0 10rpx;
					}

					.uni-icons {
						display: none;
					}

					.uni-date__x-input {
						line-height: 36rpx;
						height: 36rpx;
					}

					.uni-input-input {
						font-size: 28rpx;
					}
				}
			}

			&:last-child {
				border-bottom: 0;
			}



			.jsy-value {
				margin: 0 0 0 10px;
			}

			.jsy-text {
				color: $app-color;
			}
		}
	}
</style>